<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-11-07 09:36:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-11-02 10:57:35
 * @Description: 角色授权页
 -->
<template>
  <fks-dialog
    :visible.sync="show"
    :append-to-body="true"
    width="1000px"
    :title="LANG.MEMBER"
    class="dialog-8vh"
    top="8vh"
    @open="fetchData"
    @close="close"
  >
    <div slot="title">
      <i class="fks-icon-user" />{{ LANG.MEMBER }}
    </div>
    <div class="authorize">
      <fks-query-page
        ref="peopleTable"
        v-loading="listLoading"
        :data="list"
        :table-name="LANG.MEMBER"
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :total="total"
        @row-click="rowClick"
        @query="fetchData"
        @sort-change="sortHandler"
        @selection-change="handleSelect"
      >
        <template slot="singleSearch">
          <div class="single-searchBox">
            <fks-input
              v-model="selectName"
              size
              class="single-searchBox-item"
              :placeholder="LANG.MEMBER_SEARCH_PLACEHOLDER"
              maxlength="50"
              clearable
              @clear="search"
              @keyup.enter.native="search"
            >
              <fks-button
                slot="append"
                icon="fks-icon-search"
                @click="search"
              />
            </fks-input>
            <fks-user-selector
              :key="userNumber"
              multiple
              url
              width="auto"
              layout="branch"
              @change="addMembers"
            >
              <fks-button
                slot="reference"
                icon="fks-icon-plus"
              >
                {{
                  LANG.ADD
                }}
              </fks-button>
            </fks-user-selector>
            <fks-button
              style="margin-left: 10px;"
              icon="fks-icon-delete"
              :disabled="delList.length < 1"
              @click="handleDelete"
            >
              {{ LANG.DELETE }}
            </fks-button>
          </div>
        </template>
        <template>
          <fks-table-column
            width="55"
            type="selection"
          />
          <fks-table-column
            align="center"
            :label="LANG.USER_FULL_NAME"
            prop="userFullname"
            sortable="custom"
            min-width="120"
          />
          <fks-table-column
            :label="LANG.USERNAME"
            min-width="120"
            prop="userName"
            align="center"
            sortable="custom"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.userName }}</span>
            </template>
          </fks-table-column>
          <!-- <fks-table-column
            align="center"
            prop="orgPathName"
            :label="LANG.DEPARTMENT"
            min-width="150"
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.orgPathName
                  ? scope.row.orgPathName.replace(/^.|.$/g, '')
                  : ''
              }}</span>
            </template>
          </fks-table-column> -->
          <!-- <fks-table-column align="left" header-align="center" :label="LANG.OPERATION" min-width="150">
            <template slot-scope="scope">
              <fks-button
                @click="handleDelete(scope.$index, scope.row)"
                type="text"
                :disabled="role.roleCode === 'superManager'"
              ></fks-button>
            </template>
          </fks-table-column>-->
        </template>
      </fks-query-page>
    </div>
  </fks-dialog>
</template>

<script type="text/ecmascript-6">
import * as Auth from '../api'
import * as User from '@/api/user'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: 'success',
        '-1': 'danger'
      }
      return statusMap[status]
    },
    stateFilter(state) {
      const stateMap = {
        0: '激活',
        '-1': '停用'
      }
      return stateMap[state]
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      required: true
    }
  },
  data() {
    return {
      list: [],
      listLoading: false,
      currentPage: 1,
      pageSize: 20,
      total: 0,
      name: '',
      selectName: '',
      delList: [],
      role: {
        roleName: ''
      },
      show: this.visible,
      userNumber: 1,
      sort: '',
      columnName: ''
    }
  },
  computed: {
    portalId() {
      return this.$store.state.portal.id
    },
    multiPortal() {
      return this.$store.getters.multiPortal
    }
  },
  watch: {
    visible() {
      this.show = this.visible
    }
  },
  mounted() {},
  methods: {
    sortHandler(data) {
      let params = {}
      if (!data.order) {
        this.sort = ''
        this.columnName = ''
      } else {
        this.sort = data.order == 'ascending' ? 'asc' : 'desc'
        this.columnName =
          data.prop == 'userFullname' ? 'user_fullname' : 'user_name'
      }
      params = {
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        searchValue: this.selectName,
        roleId: this.data.id,
        sort: this.sort,
        columnName: this.columnName
      }
      this.getDataList(params)
    },
    rowClick(row) {
      this.$refs.peopleTable.$refs.table.toggleRowSelection(
        row,
        this.changeSelected(row)
      )
    },
    changeSelected(row) {
      let w = true
      this.delList.forEach((item) => {
        if (item == row.id) {
          w = false
        }
      })
      return w
    },
    fetchData() {
      if (!this.data.id) {
        return false
      }
      this.listLoading = true
      const form = {
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        searchValue: this.selectName,
        roleId: this.data.id
      }
      this.getDataList(form)
    },
    getDataList(params) {
      Auth.getRoleUser(params)
        .then((res) => {
          if (res.status && res.data) {
            this.list = res.data.list
            this.total = res.data.total
          } else {
            this.list = []
            this.total = 0
          }
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    addMembers(userList) {
      this.userNumber++
      if (userList.length < 1) return false
      const data = {
        roleId: this.data.id,
        userIdList: userList.map((item) => {
          return item.id
        })
      }
      let addUserIdList = userList.map((item) => {
        return item.id
      })
      if (this.multiPortal) {
        Auth.getPortals(
          Object.assign({ id: this.portalId }, { addUserIdList: addUserIdList })
        ).then((res) => {
          if (res.status) {
            Auth.saveRoleUser(data).then((res) => {
              if (res.status) {
                this.$message({
                  message: this.LANG.SAVE_SUCCESS,
                  type: 'success'
                })
                this.fetchData()
              }
            })
          }
        })
      } else {
        Auth.saveRoleUser(data).then((res) => {
          if (res.status) {
            this.$message({
              message: this.LANG.SAVE_SUCCESS,
              type: 'success'
            })
            this.fetchData()
          }
        })
      }
    },
    close() {
      this.selectName = ''
      this.show = false
      this.$emit('update:visible', this.show)
    },
    search() {
      this.currentPage = 1
      this.fetchData()
    },
    handleSelect(val) {
      this.delList = val.map((item) => {
        return item.id
      })
    },
    handleDelete() {
      this.$confirm(this.LANG.DELETE_TIP, {
        title: this.LANG.TIPS,
        type: 'warning',
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        confirmButtonClass: 'fks-button--danger',
        deleteMode: true
      }).then(() => {
        const data = {
          roleId: this.data.id,
          userIdList: this.delList
        }
        this.deleteMember(data)
      })
    },
    deleteMember(data) {
      Auth.deleteRoleUser(data).then((res) => {
        if (res.status) {
          this.$message({
            message: this.LANG.DELETE_SUCCESS,
            type: 'success'
          })
          this.fetchData()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.authorize {
  position: relative;
  height: calc(92vh - 225px);
}

::v-deep .fks-query-page {
  margin: 0 !important;
}

::v-deep .fks-dialog__body {
  padding: 0;
}
</style>
